<template>
    <div class="main">
        <div class="bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">{{navcontent.title}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{navcontent.titleOne}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="head">
            <div class="head-l">
                <h3>{{navcontent.titleOne}}</h3>
            </div>
            <div class="head-r">
                <span>筛选:</span>
                <el-select
                    v-model="navcontent.value"
                    multiple
                    filterable
                    allow-create
                    default-first-option>
                    <el-option
                    v-for="item in navcontent.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="navcontent.tableData"
                style="width: 100%"
                :header-cell-style="{background:'#f7f8fa',color:'#000'}"
                header-row-class-name="tableHead">
                <el-table-column
                    prop="name"
                    label="扩展点名称"
                    width="136">
                </el-table-column>
                <el-table-column
                    prop="methodName"
                    label="方法名"
                    width="136">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="场景描述"
                    width="408">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="支持店铺类型"
                    width="226">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
  props: ['navcontent']
};
</script>

<style lang="less" scoped>
.main {
    font-size: 14px;
    // 面包屑
    .bread {
        padding: 15px 0;
    }
    // 页面主体头部
    .head {
        display: flex;
        justify-content: space-between;
        height: 32px;
        margin: 20px 0;
        /deep/.el-input--suffix .el-input__inner {
            width: 240px;
            height: 32px;
            padding: 5px 26px 5px 12px;
            min-height: 32px;
        }
        .el-input__icon {
            line-height: 32px;
        }
    }
    /deep/.tableHead {
        font-size: 14px;
        font-weight:500;
        padding: 0;
    }
    /deep/.el-table th.el-table__cell>.cell {
        height: 35px;
        line-height: 35px;
    }
    /deep/.el-table .cell {
        padding: 0;
    }
    /deep/.el-table .el-table__cell {
        padding: 10px 12px;
    }
    .cell {
        white-space: pre-wrap !important;
    }
}
</style>
